<html>
    <head>
        <meta charset="utf-8">
        <title>Marker聚集</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1) 添加插件的引用 -->
        <script type="text/javascript" src="../lib/plugins/marker/leaflet.markercluster.js"></script>
        <link rel="stylesheet" type="text/css" href="../lib/plugins/marker/MarkerCluster.css">
        <link rel="stylesheet" type="text/css" href="../lib/plugins/marker/MarkerCluster.Default.css">

        <!-- 2) 添加用于生成markers的geojson的引用 -->
        <script type="text/javascript" src="../data/geojson/cities.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>

<script type="text/javascript">
    var map = null; 

    function init(){

        map = L.map("mapDiv", {
                    layers: [
                        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),
                    ],
                    center: [0,0],
                    zoom: 3,
                });

        //3) 创建L.markerClusterGroup对象
        var markers = L.markerClusterGroup();
        //4) 遍历cities的geojson对象，利用city的坐标创建marker对象
        cities.features.forEach(function(f,i){
            //创建marker对象
            var marker = L.marker([
                    f.geometry.coordinates[1],
                    f.geometry.coordinates[0],
                ]);
            //将marker对象添加到markers聚集对象
            markers.addLayer(marker)
        })
        //5) 将markers添加到地图上
        map.addLayer(markers);
    }
</script>
    